<template>
  <view class="utility-container">
    <!-- 房屋选择 -->
    <view class="house-select" @tap="showHouseSelect">
      <text>{{ selectedHouse || '请选择房屋' }}</text>
      <text class="arrow">></text>
    </view>

    <!-- 费用信息 -->
    <view class="fee-info">
      <view class="fee-item">
        <text>电费</text>
        <view class="amount">
          <text class="number">{{ electricityFee }}</text>
          <text class="unit">元</text>
        </view>
      </view>
      <view class="fee-item">
        <text>水费</text>
        <view class="amount">
          <text class="number">{{ waterFee }}</text>
          <text class="unit">元</text>
        </view>
      </view>
    </view>

    <!-- 缴费按钮 -->
    <button class="pay-button" @tap="handlePayment" 
            :disabled="!selectedHouse || totalFee <= 0">
      立即缴费 ¥{{ totalFee }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedHouse: '',
      electricityFee: 0,
      waterFee: 0
    }
  },
  computed: {
    totalFee() {
      return this.electricityFee + this.waterFee
    }
  },
  methods: {
    showHouseSelect() {
      uni.showActionSheet({
        itemList: ['房屋A', '房屋B', '房屋C'],
        success: (res) => {
          this.selectedHouse = '房屋' + ['A', 'B', 'C'][res.tapIndex]
          this.getFeeInfo()
        }
      })
    },
    async getFeeInfo() {
      try {
        const res = await this.$api.getUtilityFee({
          house: this.selectedHouse
        })
        this.electricityFee = res.data.electricityFee
        this.waterFee = res.data.waterFee
      } catch (error) {
        uni.showToast({
          title: '获取费用信息失败',
          icon: 'none'
        })
      }
    },
    async handlePayment() {
      try {
        const res = await this.$api.createPayment({
          type: 'utility',
          house: this.selectedHouse,
          amount: this.totalFee
        })
        // 调用支付接口
        uni.requestPayment({
          ...res.data,
          success: () => {
            uni.showToast({
              title: '支付成功'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          },
          fail: () => {
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            })
          }
        })
      } catch (error) {
        uni.showToast({
          title: '创建支付订单失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.utility-container {
  padding: 20rpx;
}

.house-select {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.fee-info {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .amount {
      .number {
        font-size: 36rpx;
        font-weight: bold;
        margin-right: 10rpx;
      }
      .unit {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.pay-button {
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;
  background: #007aff;
  color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
  
  &:disabled {
    background: #ccc;
  }
}
</style> 